import './index.scss';
import * as echarts from "echarts";
import {useEffect} from "react";

const DataTypeInterface = () => {
    useEffect(() => {
        init()
    }, [])

    function init() {
        // 初始化echarts实例，将其挂载到id为main的dom元素上展示
        let myChart = echarts.init(document.getElementById("dti-chart"));
        let option = {
            grid: {
                top: '20',
                bottom: '38',
                left: '50',
                right: '30'
            },
            xAxis: {
                type: 'category',
                data: ['反欺诈', '工商', '社保', '舆情', '行研', '水电', '信贷', '燃气', '融资'],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: '#FFF',
                    fontSize: 12
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {// 分隔线
                    show: true,
                    lineStyle: {
                        type: 'dotted',
                        color: 'rgba(255,255,255,0.2)'
                    },
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0.85)',
                    fontSize: 12
                }
            },
            color: ['#2276FC'],
            series: [
                {
                    data: [248, 289, 331, 150, 380, 289, 331, 150, 380],
                    type: 'bar',
                    barWidth: 10,
                    label: {
                        normal: {
                            show: true,//开启显示
                            position: 'top',//柱形上方
                            textStyle: { //数值样式
                                color: '#fff',
                                fontSize: 10
                            }
                        }
                    }
                }
            ]
        };
        // 绘制图表
        myChart.setOption(option);
    }

    return (
        <div className='dti-container'>
            <div className='dti-title'>数据类型接口统计</div>
            <div id='dti-chart' className='dti-echart'></div>
        </div>
    )
}

export default DataTypeInterface;
